/*个人账户总览tab收展组件*/
<template>
  <div class="account-toggle" >
    <div class="top" :style="{'background':color1}">
      <div class="top-title"><span></span>{{title}}</div>
      <div class="pull-btn" @click.stop.prevent="showToggle">
        <i class="iconfont" :class="isShow?'icon-xiangshang':'icon-xiangxia'"></i>
      </div>
    </div>
    <div class="top-blank" :style="{'background':color2}"></div>
    <div class="bottom" :style="{'background':color2}">
      <div class="pull-btn"  @click.stop.prevent="showToggle">
        <i class="iconfont" :class="isShow?'icon-xiangshang':'icon-xiangxia'"></i>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    data () {
      return {
        isShow:false
      }
    },
    props: {
      title: {
        type: String
      },
      color1: {
        type: String,
        default: '#999999'
      },
      color2: {
        type: String,
        default: '#999999'
      },
      toggleFunc:{
        type:Object
      },
      parentId:{
        type:String
      }
    },
    methods: {
      showToggle(){
        this.isShow=!this.isShow
        this.$emit('toggleFunc',this.isShow)
        this.$nextTick(() => {
          var anchor = document.querySelector('#'+this.parentId)
          document.body.scrollTop = anchor.offsetTop -44
        })
      }
    }
  }
</script>

<style scoped>
  .top {
    width: 100%;
    height: 37px;
    line-height: 37px;
    padding-left: 11px;
    position: relative;
    z-index: 999;
    color: #FFFFFF;
  }
  .top-blank{
    position: absolute;
    top:0;
    width: 100%;
    height: 37px;
    z-index: 998;
  }
  .bottom {
    z-index: 999;
    position: absolute;
    bottom:0;
    width: 100%;
    height: 40px;
    line-height: 37px;
    text-align: center;
  }

  .top-title {
    float: left;
    font-size: 15px;
  }

  .top-title span {
    background: #FFFFFF;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
    margin-right: 4px;
    position: relative;
    top: 1px;
  }
  .pull-btn{
    width:24px;
    height:24px;
    line-height: 24px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    display: inline-block;
    text-align: center;
  }
  .pull-btn i{
    color: #FFFFFF;
  }
  .top .pull-btn{
    position: absolute;
    top:50%;
    right: 10px;
    margin-top: -11px;
  }
</style>
